<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>新增</title>
<link rel="icon" href="favicon.ico" type="image/ico">

<link href="/Public/Admin/css/bootstrap.min.css" rel="stylesheet">
<link href="/Public/Admin/css/materialdesignicons.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.css">
<link href="/Public/Admin/css/style.min.css" rel="stylesheet">
</head>

<body>
 <style type="text/css"> 
*{ margin:0px; padding:0px; font-family:Microsoft Yahei; box-sizing:border-box; -webkit-box-sizing:border-box;} 
.demo{ margin:0 auto; min-width:320px;max-width:640px;} 
.ul_pics{ float:left;} 
.ul_pics li{float:left; margin:0px; padding:0px; margin-left:5px; margin-top:5px; position:relative; list-style-type:none; border:1px solid #eee; width:80px; height:80px;} 
.ul_pics li img{width:80px;height:80px;} 
.ul_pics li i{ position:absolute; top:0px; right:-1px; background:red; cursor:pointer; font-style:normal; font-size:10px; width:14px; height:14px; text-align:center; line-height:12px; color:#fff;} 
.progress{position:relative; margin-top:30px; background:#eee;}  
.bar {background-color: green; display:block; width:0%; height:15px; }  
.percent{position:absolute; height:15px; top:-18px; text-align:center; display:inline-block; left:0px; width:80px; color:#666; line-height:15px; font-size:12px; }  
.demo #btn{ width:80px; height:80px; margin-left:5px; margin-top:5px; border:1px dotted #c2c2c2; background:url("/Public/Admin/image/add.jpg") no-repeat center; background-size:60px auto; text-align:center; line-height:120px; font-size:30px; color:#666; float:left;} 
</style> 
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <form action="#" method="post" name="addBook" id="addBook" class="addBook">

            <div class="form-group col-md-12">
              <label for="seo_description">书籍名</label>
              <input class="form-control" type="text" id="book_name" name="book_name" value="" />
            </div>

            <div class="form-group col-md-12">
              <label for="tags">ISBN</label>
              <input class="form-control" type="text" id="book_isbn" name="book_isbn" value="" />
            </div>
           
			<div class="form-group col-md-12">
              <label for="sort">入库数量</label>
              <input type="text" class="form-control" id="book_inventory" name="book_inventory" value="" />
            </div>

            <div class="form-group col-md-12">
              <button id="submitbtn" type="submit" class="btn btn-success ajax-post confirm" target-form="addBook">确 定</button>
              <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
            </div>
          </form>
          <form name="shibie" id="shibie" class="shibie"> <div class="form-group col-md-12">
              <div class="shibieimg" id="shibieimg"></div>
		        <label for="tags">添加图片识别ISBN</label>
            <div class="demo"> 
             <a href="javascript:void(0)" rel="external nofollow" id="btn"></a> 
             <ul id="ul_pics" class="ul_pics clearfix"> 
             </ul>
             <br><br>
             <button id="shibiebtn" type="button" class="btn btn-success ajax-post confirm" target-form="shibie">识 别</button>
            </div>
            </div></form>
        </div>
      </div>
    </div>
    
  </div>
  
</div>
<script type="text/javascript" src="/Public/Admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/Public/Admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Public/Admin/js/perfect-scrollbar.min.js"></script>
<!--标签插件-->
<script src="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/Public/Admin/js/main.min.js"></script>
<script type="text/javascript" src="/Public/Admin/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/Public/Admin/js/lyear-loading.js"></script>
<script type="text/javascript" src="/Public/Admin/js/plupload.full.min.js"></script>
<script type="text/javascript">
//上传图片
var uploader = new plupload.Uploader({ //创建实例的构造方法
    runtimes: 'html5,flash,silverlight,html4',
    //上传插件初始化选用那种方式的优先级顺序
    browse_button: 'btn',
    // 上传按钮
    url: "/admin.php?c=Book&a=upImg",
    resize: {
        width: 100,
        height: 100,
        crop: true,
        quality: 50,
        preserve_headers: false
    },
    //远程上传地址，用php的$_SERVER["PHP_SELF"]获取当前脚本，使其动态化，以免更改admin.php文件名后失效
    flash_swf_url: 'plupload/Moxie.swf',
    //flash文件地址
    silverlight_xap_url: 'plupload/Moxie.xap',
    //silverlight文件地址
    filters: {
        max_file_size: '3mb',
        //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
        mime_types: [ //允许文件上传类型
        {
            title: "files",
            extensions: "jpg,png,gif,jpeg"
        }]
    },
    multi_selection: false,
    //true:ctrl多文件上传, false 单文件上传
    init: {
        FilesAdded: function(up, files) { //文件上传前
            if (uploader.files.length >9) {//判断文件是否大于九个，阻止上传
                //$("#ul_pics").children("li").length > 30
                alert("您上传的图片太多了！");
                uploader.destroy();
            } else {
                var li = '';
                plupload.each(files,
                function(file) { //遍历文件
                    li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                });
                $("#ul_pics").append(li);
                uploader.start();
            }
        },
        UploadProgress: function(up, file) { //上传中，显示进度条
            $("#" + file.id).find('.bar').css({
                "width": file.percent + "%"
            }).find(".percent").text(file.percent + "%");
        },
        FileUploaded: function(up, file, info) { //文件上传成功的时候触发
            var data = JSON.parse(info.response);
            $("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div>");
            var message = eval("("+info.response+")");
            console.log(message['pic']);
            var imgUrl = 'http://book.wcwcw.top'+data.pic.slice(1);
            $("#shibieimg").html("<input type='hidden' id='imgUrl' name='imgUrl' value='"+imgUrl+"' />")
        },
        Error: function(up, err) { //上传出错的时候触发
            alert(err.message);
        }
    }
});

uploader.init();

//这里是识别ISBN
$("#shibiebtn").click(function(){
    //alert('123');
    var imgUrl = $("#imgUrl").val();
    //var imgUrl = 'http://book.wcwcw.top'+imgUrl.slice(1);
    //alert(imgUrl);
    $.post("./ajax.php?do=isbn",
  $('#shibie').serialize(),
  function(status){
      if(status==500){
          $.notify({
    		// options
    		message: '失败<br>请检查后重试',
		  },{
    		// settings
    		type: 'danger',
    		delay: 5000,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
      }
      else{
          //console.log(status);
          $("#book_isbn").val(status);
          //再次POST请求，利用ISBN获取书籍名称等信息
          $.post("./ajax.php?do=getisbn",{'isbn':status},function(result){
              //$("#book_name").val(result);
              var a = JSON.parse(result);
              $("#book_name").val(a.data.name);
              //console.log(a.data.name);
              //console.log(a);
          });
          
          $.notify({
    		// options
    		message: '成功<br>',
    		//url: '?c=Book&a=showBook',
    		//target: '_self'
		  },{
    		// settings
    		type: 'info',
    		delay: 5000,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
      }
	  
});
//这里return false了就能不刷新了
return false;
});

//以下是新增书籍
$("#submitbtn").click(function(){
  $.post("?c=Book&a=addBook",
  $('#addBook').serialize(),
  function(status){
      if(status==200){
          $.notify({
    		// options
    		message: '成功新增<br>点击本消息跳转到书籍列表',
    		url: '?c=Book&a=showBook',
    		target: '_self'
		  },{
    		// settings
    		type: 'info',
    		delay: 5000,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
		  $("#username").val("");
		  $("#password").val("123456");
		  $("#name").val("");
		  $("#sex").val("2");
		  $("#phone").val("");
		  $("#qq").val("");
		  $("#email").val("");
      }
      else{
          $.notify({
    		// options
    		message: '失败<br>请检查后重试',
    		//url: '?c=Book&a=showUser',
    		//target: '_self'
		  },{
    		// settings
    		type: 'danger',
    		delay: 5000,
    		placement: {
    		from: "top",
    		align: "right"
    		}
		  });
      }
	  
});
//这里return false了就能不刷新了
return false;
});
	
//判断书籍是否存在
$('#account').blur(function(){
	var acc = $('#account').val();
	$.post("?c=Book&a=isExist",
	acc,
	function(status){
      if(status==200){
		$('#isExist').append('√');
      }
      else{
		$('#isExist').append('×');
      }
	  
	});
});

//当手动输入isbn时
$("#book_isbn").blur(function(){
    var isbn = $("#book_isbn").val();
    $.post("./ajax.php?do=getisbn",{'isbn':isbn},function(result){
              //$("#book_name").val(result);
              var a = JSON.parse(result);
              $("#book_name").val(a.data.name);
              sleep(1000);
              //console.log(a.data.name);
              //console.log(a);
          });
    sleep(1000);
});

//睡眠函数
function sleep(time){
    var timeStamp = new Date().getTime();
    var endTime = timeStamp + time;
    while(true){
        if (new Date().getTime() > endTime){
        return;
        } 
    }
}
// console.time('runTime:');
// sleep(2000);
// console.log('1');
// sleep(3000);
// console.log('2');
// sleep(2000);
// console.log('3');
// console.timeEnd('runTime:');
// 1
// 2
// 3
// runTime:: 7004.301ms


</script>
</body>
</html>